import { useNavigate } from "react-router-dom";
import { useState, useRef } from "react";
import instance from "../axios/index";




function Member() {
    const navigate = useNavigate();
    const oForm = useRef(null);

    const [huiyuangouma, setHuiyuangouma] = useState([
        { id: 1, name: '连续包月', price: '1999' },
        { id: 2, name: '永久会员', price: '99999' }
    ]);
    const [xuanzho, setXuanzho] = useState(1);
    const onClickOne = (id) => {
        setXuanzho(id);
    }

    const kaitonghuiyuan = async () => {
        const id = sessionStorage.getItem('id');
        const price = huiyuangouma.filter(item => item.id == xuanzho)[0].price;
        const name = `开通${huiyuangouma.filter(item => item.id == xuanzho)[0].name}`;
        console.log(id, price);
        const res = await instance({ url: '/my/zhifu', method: 'post', data: { id, price, name } })
        console.log(res);
        oForm.current.innerHTML = res.data;
        // 自动调用form表单  document.forms 获取当前页面中所有的表单集合 [form,form]
        document.forms[0].submit();

    }

    return (<>
        <div className='backColor' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div onClick={() => navigate('/my')}>
                <img src='/iconfont/my/左.png' alt="search" style={{ width: '20px', height: '20px' }} />
            </div>
            <div>
                <h2 style={{ color: 'gold' }}>会员中心</h2>
            </div>
            <div>
                ···
            </div>
        </div>
        <div style={{position:'relative',width:'100%',height:'200px',backgroundColor:'#ccc'}}>
            <div style={{ width: '60%',height:'80px',position:'absolute',top:'0',left:'0',right:'0',bottom:'0',margin:'auto'}}>
                <h3>会员权益</h3>
                <ul>
                    <li>黑商门店只有一个会员权益</li>
                    <li>会员可享受个人信息修改</li>
                </ul>
            </div>
        </div>
        <div>
            <div style={{ width: '90%', margin: '0 auto', padding: '20px', display: 'flex', justifyContent: 'space-between' }}>
                {huiyuangouma.map((item, index) => (<div onClick={() => onClickOne(item.id)} style={{ width: '35%', border: item.id == xuanzho ? '2px solid gold' : '2px solid gray', textAlign: 'center', height: '100px' }}>
                    <h3 style={{ height: '50px', lineHeight: '50px', backgroundColor: item.id == xuanzho ? 'gold' : 'gray' }}>{item.name}</h3>
                    <h3 style={{ height: '40px', lineHeight: '40px' }}>￥{item.price}</h3>
                </div>))}
            </div>
        </div>
        <div ref={oForm}></div>
        <div style={{ height: '100px' }}>
            <button className='Gouwu writhColor' onClick={() => kaitonghuiyuan()}>开通会员</button>
        </div>
    </>)
}

export default Member;